﻿@namespace Bit.BlazorUI
@inherits BitComponentBase
@typeparam TItem

@if (IsOpen)
{
    <div style="@Styles?.Overlay" class="bit-npn-ovl @Classes?.Overlay" @onclick="ClosePanel"></div>
}

@{
    var isToggled = (NoToggle is false) && IsToggled;
}

<div @ref="RootElement" @attributes="HtmlAttributes"
     id="@_Id"
     style="@GetPanelStyle(isToggled)"
     class="@((ClassBuilder.Value + $"{(isToggled ? $" bit-npn-tgl {Classes?.Toggled}" : "")}").Trim())"
     dir="@Dir?.ToString().ToLower()">
    <BitSwipeTrap Style="width:100%; height:100%"
                  Threshold="5"
                  Throttle="10"
                  OnEnd="HandleOnSwipeEnd"
                  OnMove="HandleOnSwipeMove"
                  OnTrigger="HandleOnSwipeTrigger"
                  OrientationLock="BitSwipeOrientation.Horizontal">
        <div style="@Styles?.Container" class="bit-npn-cnt @Classes?.Container">
            @if (Header is not null)
            {
                @Header
            }
            else
            {
                <div style="@Styles?.Header" class="bit-npn-hdr @Classes?.Header">
                    @if (IconUrl.HasValue())
                    {
                        if (IconNavUrl.HasValue())
                        {
                            <a href="@IconNavUrl">
                                <img src="@IconUrl"
                                     class="bit-npn-img @Classes?.HeaderIcon"
                                     style="@(isToggled ? "display:none;" : "") @Styles?.HeaderIcon" />
                            </a>
                        }
                        else
                        {
                            <img src="@IconUrl"
                                 class="bit-npn-img @Classes?.HeaderIcon"
                                 style="@(isToggled ? "display:none;" : "") @Styles?.HeaderIcon" />
                        }
                    }

                    <div class="bit-npn-spc" style="@(isToggled ? "display:none;" : "")" />

                    @if (NoToggle is false && HideToggle is false)
                    {
                        <BitButton IconOnly
                                   Color="Color"
                                   Size="BitSize.Large"
                                   OnClick="ToggleNavPanel"
                                   Variant="BitVariant.Text"
                                   Style="@Styles?.ToggleButton"
                                   IconName="ColumnRightTwoThirds"
                                   Class="@($"bit-npn-tbn {Classes?.ToggleButton}".Trim())"
                                   Classes="@(new() { Icon = "bit-icon-ex bit-icon-ex--ColumnRightTwoThirds" })" />
                    }
                </div>
            }

            @if (NoSearchBox is false)
            {
                <BitSearchBox @ref="_searchBoxRef"
                              Underlined
                              Color="Color"
                              OnChange="SearchNavItems"
                              Styles="SearchBoxStyles"
                              Classes="SearchBoxClasses"
                              Class="@Classes?.SearchBox"
                              Immediate DebounceTime="500"
                              Placeholder="@SearchBoxPlaceholder"
                              Style="@($"{(isToggled ? "display:none;" : "")}{Styles?.SearchBox}".Trim())" />

                @if (isToggled)
                {
                    <BitButton IconOnly
                               Color="Color"
                               IconName="Search"
                               Size="BitSize.Large"
                               OnClick="ToggleForSearch"
                               Variant="BitVariant.Text"
                               Style="@Styles?.ToggleSearchButton"
                               Class="@Classes?.ToggleSearchButton" />
                }
            }

            @if (Items.Any() && _filteredNavItems.Any() is false)
            {
                if (isToggled is false)
                {
                    if (EmptyListTemplate is not null)
                    {
                        @EmptyListTemplate
                    }
                    else
                    {
                        <BitText Style="@Styles?.EmptyListMessage" Class="@Classes?.EmptyListMessage">
                            @(EmptyListMessage ?? "Nothing found!")
                        </BitText>
                    }
                }
            }
            else
            {
                <BitNav @ref=_bitNavRef
                        Accent="Accent"
                        AllExpanded="AllExpanded"
                        ChevronDownIcon="@ChevronDownIcon"
                        Classes="NavClasses"
                        Color="Color"
                        DefaultSelectedItem="_filteredNavItems.Any() ? _filteredNavItems[0] : null"
                        FullWidth
                        HeaderTemplate="HeaderTemplate"
                        HeaderTemplateRenderMode="HeaderTemplateRenderMode"
                        IconOnly="isToggled"
                        IndentPadding="IndentPadding"
                        IndentReversedPadding="IndentReversedPadding"
                        IndentValue="IndentValue"
                        Items="_filteredNavItems"
                        ItemTemplate="ItemTemplate"
                        ItemTemplateRenderMode="ItemTemplateRenderMode"
                        Match="NavMatch"
                        Mode="NavMode"
                        NoCollapse="NoCollapse"
                        OnItemClick="(TItem item) => HandleNavItemClick(item)"
                        OnItemToggle="OnItemToggle"
                        OnSelectItem="OnSelectItem"
                        RenderType="RenderType"
                        Reselectable="Reselectable"
                        ReversedChevron="ReversedChevron"
                        SingleExpand="SingleExpand"
                        Styles="NavStyles"
                        Class="@Classes?.Nav"
                        Style="@Styles?.Nav" />
            }

            <BitSpacer />

            @if (Footer is not null)
            {
                @Footer
            }
        </div>
    </BitSwipeTrap>
</div>